{extend name="Layout/base" /}
{block name="content"}
<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">



  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Padding
        </div>
        <p>All size: 0,5,10,15,20,25,30,35,40,45,50px</p>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.padding-5</code></td>
                    <td>
                      <div class="demolayout padding-5">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>padding: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.padding-l-5</code></td>
                    <td>
                      <div class="demolayout padding-l-5">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>padding-left: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.padding-r-5</code></td>
                    <td>
                      <div class="demolayout padding-r-5">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>padding-right: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.padding-t-5</code></td>
                    <td>
                      <div class="demolayout padding-t-5">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>padding-top: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.padding-b-5</code></td>
                    <td>
                      <div class="demolayout padding-b-5">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>padding-bottom: 5px</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Margin
        </div>
        <p>All size: 0,5,10,15,20,25,30,35,40,45,50px</p>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.margin-5</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox margin-5">Demo</div>
                      </div>
                    </td>
                    <td>margin: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.margin-l-5</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox margin-l-5">Demo</div>
                      </div>
                    </td>
                    <td>margin-left: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.margin-r-5</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox margin-r-5">Demo</div>
                      </div>
                    </td>
                    <td>margin-right: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.margin-t-5</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox margin-t-5">Demo</div>
                      </div>
                    </td>
                    <td>margin-top: 5px</td>
                  </tr>
                  <tr>
                    <td><code>.margin-b-5</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox margin-b-5">Demo</div>
                      </div>
                    </td>
                    <td>margin-bottom: 5px</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Float
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.float-l</code></td>
                    <td>
                      <div class="demolayout float-l">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>float: left</td>
                  </tr>
                  <tr>
                    <td><code>.float-r</code></td>
                    <td>
                      <div class="demolayout float-r">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>float: right</td>
                  </tr>
                  <tr>
                    <td><code>.float-n</code></td>
                    <td>
                      <div class="demolayout float-n">
                        <div class="demobox">Demo</div>
                      </div>
                    </td>
                    <td>float: none</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Text Align
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.text-r</code></td>
                    <td>
                        <div class="demotext text-right">Demo</div>
                    </td>
                    <td>text-align: right</td>
                  </tr>
                  <tr>
                    <td><code>.text-l</code></td>
                    <td>
                        <div class="demotext text-l">Demo</div>
                    </td>
                    <td>text-align: left</td>
                  </tr>
                  <tr>
                    <td><code>.text-c</code></td>
                    <td>
                        <div class="demotext text-c">Demo</div>
                    </td>
                    <td>text-align: center</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Border
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.border-b-none</code></td>
                    <td>
                        <div class="demoboxborder border-b-none">Demo</div>
                    </td>
                    <td>border-bottom: none</td>
                  </tr>
                  <tr>
                    <td><code>.border-t-none</code></td>
                    <td>
                        <div class="demoboxborder border-t-none">Demo</div>
                    </td>
                    <td>border-top: none</td>
                  </tr>
                  <tr>
                    <td><code>.border-l-none</code></td>
                    <td>
                        <div class="demoboxborder border-l-none">Demo</div>
                    </td>
                    <td>border-left: none</td>
                  </tr>
                  <tr>
                    <td><code>.border-r-none</code></td>
                    <td>
                        <div class="demoboxborder border-r-none">Demo</div>
                    </td>
                    <td>border-right: none</td>
                  </tr>
                  <tr>
                    <td><code>.border-none</code></td>
                    <td>
                        <div class="demoboxborder border-none">Demo</div>
                    </td>
                    <td>border: none</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Text Size and Styles
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.f-size-10</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox f-size-10">Demo</div>
                      </div>
                    </td>
                    <td>font-size: 10px<br><b>All size available 10 to 32</b></td>
                  </tr>
                  <tr>
                    <td><code>.f-size-16</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox f-size-16">Demo</div>
                      </div>
                    </td>
                    <td>font-size: 16px</td>
                  </tr>
                  <tr>
                    <td><code>.f-bold</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox f-bold">Demo</div>
                      </div>
                    </td>
                    <td>font-weight: bold</td>
                  </tr>
                  <tr>
                    <td><code>.f-italic</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox f-italic">Demo</div>
                      </div>
                    </td>
                    <td>font-style: italic</td>
                  </tr>
                  <tr>
                    <td><code>.f-underline</code></td>
                    <td>
                      <div class="demolayout">
                        <div class="demobox f-underline">Demo</div>
                      </div>
                    </td>
                    <td>text-decoration: underline</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    

  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Colors
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.color1</code></td>
                    <td>
                        <div class="democolors color1">Demo</div>
                    </td>
                    <td>color: @color1;</td>
                  </tr>
                  <tr>
                    <td><code>.color2</code></td>
                    <td>
                        <div class="democolors color2">Demo</div>
                    </td>
                    <td>color: @color2;</td>
                  </tr>
                  <tr>
                    <td><code>.color3</code></td>
                    <td>
                        <div class="democolors color3">Demo</div>
                    </td>
                    <td>color: @color3;</td>
                  </tr>
                  <tr>
                    <td><code>.color4</code></td>
                    <td>
                        <div class="democolors color4">Demo</div>
                    </td>
                    <td>color: @color4;</td>
                  </tr>
                  <tr>
                    <td><code>.color5</code></td>
                    <td>
                        <div class="democolors color5">Demo</div>
                    </td>
                    <td>color: @color5;</td>
                  </tr>
                  <tr>
                    <td><code>.color6</code></td>
                    <td>
                        <div class="democolors color6">Demo</div>
                    </td>
                    <td>color: @color6;</td>
                  </tr>
                  <tr>
                    <td><code>.color7</code></td>
                    <td>
                        <div class="democolors color7">Demo</div>
                    </td>
                    <td>color: @color7;</td>
                  </tr>
                  <tr>
                    <td><code>.color8</code></td>
                    <td>
                        <div class="democolors color8">Demo</div>
                    </td>
                    <td>color: @color8;</td>
                  </tr>
                  <tr>
                    <td><code>.color9</code></td>
                    <td>
                        <div class="democolors color9">Demo</div>
                    </td>
                    <td>color: @color9;</td>
                  </tr>
                  <tr>
                    <td><code>.color10</code></td>
                    <td>
                        <div class="democolors color10">Demo</div>
                    </td>
                    <td>color: @color10;</td>
                  </tr>
                  <tr>
                    <td><code>.color11</code></td>
                    <td>
                        <div class="democolors color11">Demo</div>
                    </td>
                    <td>color: @color11;</td>
                  </tr>
                  <tr>
                    <td><code>.color12</code></td>
                    <td>
                        <div class="democolors color12">Demo</div>
                    </td>
                    <td>color: @color12;</td>
                  </tr>
                  <tr>
                    <td><code>.color13</code></td>
                    <td>
                        <div class="democolors color13">Demo</div>
                    </td>
                    <td>color: @color13;</td>
                  </tr>
                  <tr>
                    <td><code>.color14</code></td>
                    <td>
                        <div class="democolors color14">Demo</div>
                    </td>
                    <td>color: @color14;</td>
                  </tr>
                  <tr>
                    <td><code>.color15</code></td>
                    <td>
                        <div class="democolors color15">Demo</div>
                    </td>
                    <td>color: @color15;</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    


    

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Background Colors
        </div>

            <div class="panel-body">

              <table class="table table-hover">
                <thead>
                  <tr>
                    <td>Class</td>
                    <td>Preview</td>
                    <td>Description</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.color1-bg</code></td>
                    <td>
                        <div class="democolors color1-bg"></div>
                    </td>
                    <td>background: @color1;</td>
                  </tr>
                  <tr>
                    <td><code>.color2-bg</code></td>
                    <td>
                        <div class="democolors color2-bg"></div>
                    </td>
                    <td>background: @color2;</td>
                  </tr>
                  <tr>
                    <td><code>.color3-bg</code></td>
                    <td>
                        <div class="democolors color3-bg"></div>
                    </td>
                    <td>background: @color3;</td>
                  </tr>
                  <tr>
                    <td><code>.color4-bg</code></td>
                    <td>
                        <div class="democolors color4-bg"></div>
                    </td>
                    <td>background: @color4;</td>
                  </tr>
                  <tr>
                    <td><code>.color5-bg</code></td>
                    <td>
                        <div class="democolors color5-bg"></div>
                    </td>
                    <td>background: @color5;</td>
                  </tr>
                  <tr>
                    <td><code>.color6-bg</code></td>
                    <td>
                        <div class="democolors color6-bg"></div>
                    </td>
                    <td>background: @color6;</td>
                  </tr>
                  <tr>
                    <td><code>.color7-bg</code></td>
                    <td>
                        <div class="democolors color7-bg"></div>
                    </td>
                    <td>background: @color7;</td>
                  </tr>
                  <tr>
                    <td><code>.color8-bg</code></td>
                    <td>
                        <div class="democolors color8-bg"></div>
                    </td>
                    <td>background: @color8;</td>
                  </tr>
                  <tr>
                    <td><code>.color9-bg</code></td>
                    <td>
                        <div class="democolors color9-bg"></div>
                    </td>
                    <td>background: @color9;</td>
                  </tr>
                  <tr>
                    <td><code>.color10-bg</code></td>
                    <td>
                        <div class="democolors color10-bg"></div>
                    </td>
                    <td>background: @color10;</td>
                  </tr>
                  <tr>
                    <td><code>.color11-bg</code></td>
                    <td>
                        <div class="democolors color11-bg"></div>
                    </td>
                    <td>background: @color11;</td>
                  </tr>
                  <tr>
                    <td><code>.color12-bg</code></td>
                    <td>
                        <div class="democolors color12-bg"></div>
                    </td>
                    <td>background: @color12;</td>
                  </tr>
                  <tr>
                    <td><code>.color13-bg</code></td>
                    <td>
                        <div class="democolors color13-bg"></div>
                    </td>
                    <td>background: @color13;</td>
                  </tr>
                  <tr>
                    <td><code>.color14-bg</code></td>
                    <td>
                        <div class="democolors color14-bg"></div>
                    </td>
                    <td>background: @color14;</td>
                  </tr>
                  <tr>
                    <td><code>.color15-bg</code></td>
                    <td>
                        <div class="democolors color15-bg"></div>
                    </td>
                    <td>background: @color15;</td>
                  </tr>
                </tbody>
              </table>
            </div>

      </div>
    </div>
    



  </div>
  <!-- End Row -->




</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->
{/block}